<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">

    <input type="button" value="修改msg" @click="msg='no'">

    <p id="enha"> {{ msg }}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'ok',
        },
        methods: {
            show() {
                console.log("show()方法")
            }
        },
        filters: {},
        directives: {},

        //=================================== 下面函数处于 Vue实例 创建阶段 ===================================

        beforeCreate() {//第1个生命周期函数：表示实例完全被创建出来之前，这个beforeCreate()函数会被执行
            console.log("beforeCreate -- ")
            // console.log(this.msg)
            // this.show()
            //注意：在 beforeCreate() 生命周期函数执行的时候， data 和 methods 中的数据都还没有初始化
        },
        created() {//第2个生命周期函数：表示Vue实例已经被创建出来
            console.log("created -- " + this.msg)
            this.show()
            // 在 created()中，data 和 methods 中的数据都已经被初始化好了。
            //这个created() 函数也是 最早操作 methods 和 data中数据的时机。
        },
        beforeMount() {//第3个生命周期函数：表示模板已经在内存中编译完成，但是尚未渲染挂载到页面中去。

            //获取页面上的元素的值
            console.log("beforeMount -- " + document.getElementById("enha").innerText)//值是： {{ msg }}

            //在 beforeMount()函数执行时，页面中的元素还没有被真正的数据替换过来。
        },
        mounted() {//第4个生命周期函数：表示内存中的模板已经渲染挂载到页面上了 ，用户已经可以看到 渲染好的页面了。
            console.log("mounted -- " + document.getElementById("enha").innerText)//值是： ok

            //注意：mounted()函数是 vue实例创建期间的最后一个生命周期函数了，当执行完 mounted()函数，就表示 vue实例已经创建完成。
        },

        //=================================== 下面的函数处于 Vue实例 运行阶段 ===================================

        beforeUpdate() {//第5个生命周期函数：表示界面还没有被更新【数据已经发生了更新】
            console.log("beforeUpdate 界面上元素的值：" + document.getElementById("enha").innerText)//值是： no
            console.log("beforeUpdate data.msg的值：" + this.msg)//值是： ok

            //注意：当执行 beforeUpdate()时，页面中的数据仍然是旧的，而 data.msg 的数据已经是 最新的了，页面上的数据还没有和 最新data上的数据 保持同步。
        },
        updated() {//第6个生命周期函数：
            console.log("updated 界面上元素的值：" + document.getElementById("enha").innerText)//值是： ok
            console.log("updated data.msg的值：" + this.msg)//值是： ok

            //updated()函数执行时，页面和data数据已经保持同步。
        },

        //=================================== 下面的函数处于 Vue实例 销毁阶段 ===================================

        beforeDestroy() {//第7个生命周期函数：表示 vue实例从运行阶段进入到了销毁阶段，但是在 beforeDestroy()函数中， vue实例上的属性，数据还处于可以使用的状态，未销毁。
            console.log(" beforeDestroy ----- ")
            console.log("beforeDestroy 界面上的元素的值：" + document.getElementById("enha").innerText)
            console.log("beforeDestroy data.msg的值：" + this.msg)
        },

        destroyed() {//第8个生命周期函数：表示 vue实例已经被销毁了，其 data，methods，filters，directives等 都不可用。
            console.log(" destroyed ----- ")
        },


        // 下面三个钩子函数
        // 具体详解请参考： 《13.Vue实例生命周期2.html》
        //=================================== 下面的函数处于 Vue实例 激活阶段 ===================================
        // activated 和 deactivated 需要配合Vue的内置组件 keep-alive 使用
        activated() {
            console.log("activated ----- ")

        },
        deactivated() {
            console.log("deactivated ----- ")
        },

        //当子孙组件出错时，会调用该函数。
        errorCaptured(err, vm, info) {
            // err: 错误对象
            // vm: 报错的子孙组件
            // info: 报错的子孙组件的具体哪个地方报错

            // 该钩子函数可以返回 false ： 阻断错误继续向上传播。
        },

    })
</script>
</body>
</html>
